import ReactEcharts from 'echarts-for-react';

const BarChart = (props) => {
    // eslint-disable-next-line react/prop-types
    const {data=[],xAxData=[]} = props;
    const echartsData = data||[];
    const categories = xAxData||[]
 const sortedData = [...(data || [])].sort((a, b) => b - a);
 const topThreeData = sortedData.slice(0, 3);

  // 配置项
  const option = {
    xAxis: {
      type: 'category',
      data: categories,
    },
    yAxis: {
      type: 'value',
      name: 'Similarity'
    },
 
    series: [{
      data: echartsData,
      type: 'bar',
    //   name: '2011',
      label: {
        show: true,
        position: 'outside'
      },
      itemStyle: {
        color: (params) => {
          if (topThreeData.includes(params.data)) {
            return 'orange'; // 数据大小前三名颜色设置为橙色
          } else {
            return 'gray'; // 其他柱状图颜色设置为灰色
          }
        },
      },
    }],
 
  };

  return (
    <div style={{ width: '100%', height: '400px' }}>
      <ReactEcharts option={option} />
    </div>
  );
};

export default BarChart;
